<template>
  <div class="container">
   <el-card class="box-card">
    
    <!-- 学科等信息筛选搜索 -->
    <QuestionsScreening  @getList='search'></QuestionsScreening>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first"> </el-tab-pane>
      <el-tab-pane label="待审核" name="second"> </el-tab-pane>
      <el-tab-pane label="已审核" name="third"> </el-tab-pane>
      <el-tab-pane label="已拒绝" name="fourth"> </el-tab-pane>
    </el-tabs>
    <!-- <el-alert title="消息提示的文案" type="info" show-icon></el-alert> -->
    <el-alert
      v-if="alertText !== ''"
      :title="alertText"
      type="info"
      class="alert"
      :closable="false"
      show-icon
    ></el-alert>
    <!-- 数据渲染 -->
    <el-table border style="width: 100%" :data="list">
      <!-- <el-table-column type="index" width="50" label="试题编号">
        </el-table-column> -->
      <el-table-column label="试题编号" prop="number" width="120">
      </el-table-column>
      <el-table-column label="学科" prop="subject" width="120">
      </el-table-column>
      <el-table-column label="目录" prop="catalog" width="120">
      </el-table-column>
      <el-table-column
        v-slot="{ row }"
        label="题型"
        prop="questionType"
        width="120"
      >
        {{ row.questionType | toQuestionType }}
      </el-table-column>
      <el-table-column
        v-slot="{ row }"
        label="题干"
        prop="question"
        width="280"
      >
        <!-- {{question}} -->
        <p v-html="row.question"></p>
      </el-table-column>
      <el-table-column
        v-slot="{ row }"
        label="录入事时间"
        prop="addDate"
        width="180"
      >
        {{ row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}") }}
      </el-table-column>
      <el-table-column
        v-slot="{ row }"
        label="难度"
        prop="difficulty"
        width="80"
      >
        {{ row.difficulty | toDifficult }}
      </el-table-column>
      <el-table-column label="录入人" prop="creator" width="120">
      </el-table-column>
      <el-table-column v-slot="{ row }" label="审核状态" prop="chkState">
        {{ row.chkState | toChkState }}
      </el-table-column>
      <el-table-column label="审核意见" prop="chkRemarks" width="150">
      </el-table-column>
      <el-table-column label="审核人" prop="chkUser" width="150">
      </el-table-column>
      <el-table-column v-slot="{ row }" label="发布状态" prop="publishState">
        {{ row.publishState === 0 ? "未发布" : "已发布" }}
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template v-slot="{ row }">
          <el-button @click="previewClick(row)" type="text" size="small" >预览</el-button
          >
          <el-button type="text" size="small" @click="Approval(row)" :disabled="row.chkState===0? false:true &&row.publishState===0? false:true" >审核</el-button>
          <el-button type="text" size="small"  @click="$router.push('new')" :disabled="row.publishState===0? false:true">修改</el-button>
          <el-button type="text" size="small" @click="putShelves(row)">{{ row.publishState === 1 ? "下架" : "上架" }}</el-button>
          <el-button type="text" @click="onDel(row)" :disabled="row.publishState===0? false:true">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" justify="end">
      <!-- <el-pagination 
            layout="prev, pager, next" 
            @current-change="onCurrentChange" 
            :page-size="page.pagesize"
            :total="page.total"> -->
      <!-- @current-change="handleCurrentChange" -->

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(page.page)"
        :page-size="Number(page.pagesize)"
        :page-sizes="[5, 10]"
        layout="total, prev, pager,next,sizes,jumper"
        :total="Number(page.total)"
      >
      </el-pagination>
    </el-row>
    <PreView :questionInfo="questionInfo" ref="preViewRef"></PreView>
    <!-- 审核组件弹框 -->
    <process :approvalInfo="approvalInfo" ref="proCessRef"></process>
</el-card>
  </div>
</template>

<script>
// import QuestionsScreening from "./questions-choice/questions-screening.vue";
// import process from "./questions-choice/process.vue";
import process from "../components/questions-choice/process.vue";

import QuestionsScreening from "../components/questions-choice/questions-input.vue";
import PreView from "../components/questions-choice/yulan.vue"

import { choice, choiceAdd, choicePublish,  } from "../../api/hmmm/questions.js";
export default {
  components: {
    QuestionsScreening,
    PreView,
    process
  },
  data () {
    return {
      // dialogFormVisible: false,
      // showDialog:false,
      activeName: 'first',
      alertText: '',
      // publishState:0,
      list: [],
      page: {
        page: 1,
        pagesize: 5,
        total: 0,
      },
      //标签切换
      chkState: 1,
      // 详情数据
      questionInfo: {},
      //审批数据
      approvalInfo:{}
    };
  },
  created () {
    // this.choice()
    this.getChoice()
  },
  methods: {
    //搜索
      async search(form){
       const { data: res } = await choice(form)
       this.list = res.items
    },
    //审批
    Approval(data){
      this.approvalInfo = data
      // 打开对话框
      this.$refs.proCessRef.dialogFormV()
      // this.getChoice()

    },
    // 预览
    previewClick (data) {
      // console.log(123, data)
      // 赋值
      this.questionInfo = data
      // 打开对话框
      this.$refs.preViewRef.dialogFormV()

      // 显示对话框
      // this.dialogFormVisible = true
      // this.title = '题目预览'

      // console.log(data)
      // await this.$nextTick()
      // const  {data} = await choice( {data} )
      // this.$refs.subjectsRef.form = await detail(id })获取详情给dataList
      // this.$refs.preViewRef.questionInfo = data
      // console.log(items)
      // console.log(this.$refs.preViewRef.questionInfo)
      // Object.assign(this.$refs.preViewRef.questionInfo, data)
    },
    //删除
    onDel ({id,choiceState}) {
      // 通过代码片段elmecon
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        console.log(id,choiceState)
        await choiceAdd({id,
        choiceState:choiceState=0})
        this.$message.success('操作成功')
        this.getChoice()
      }).catch(() => { })
    },
    //上下架
    putShelves({id, publishState}){
        this.$confirm('是否修改发布状态?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        // console.log(publishState)
        await choicePublish({
          id,
          publishState: publishState === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        this.getChoice()
      }).catch(() => { })
    },
    // tab栏切换框
    handleClick (tab, event) {
      // console.log(tab.label)
      // this.page.page = 1
      // this.getChoice()
      if (tab.label === '全部') {
        // this.choice()
        this.getChoice()

      } else if (tab.label === '待审核') {
        this.chkState = 0
        // this.data.page = 1
        this.getChoice(this.chkState)
      } else if (tab.label === '已审核') {
        this.chkState = 1
        // this.data.page = 1
        this.getChoice(this.chkState)
      } else if (tab.label === '已拒绝') {
        this.chkState = 2
        // this.data.page = 1
        this.getChoice(this.chkState)
      }
    },

    //页面数据渲染
    // async choice(){
    //   // const{data} =await choice()
    //   // console.log(data)
    //   const{data:{counts,items}} =await choice(this.page)
    //   this.list=items
    //   this.page.total = counts
    //   this.alertText = `共${counts}条信息`
    // },
    //  获取数据
    async getChoice (chkState) {
      let { data: { counts, items } } = await choice({
        // ...this.form,
        chkState,
        ...this.page
      })
      // console.log(items)
      this.page.total = counts
      this.list = items
      this.alertText = `共${counts}条信息`
    },
    //改变每页显示多少条
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getChoice()
    },
    //当前页码
    handleCurrentChange (val) {
      this.page.page = val
      this.getChoice()
    },

  }
}
</script>

<style scoped lang='less'>
  ::v-deep .el-pagination__jump {
    margin-left: 0px;
  }

</style>
